<template>
  <div>
      <h3>基础用法</h3>
      <p>基础的按钮用法</p>
      <div class="component-wrapper">
        <div class="component-wrapper-demo">
          <g-button icon="settings">设置</g-button>
          <g-button icon="thumbsup">点赞</g-button>
          <g-button icon="download">下载</g-button>
          <g-button icon="down">向下</g-button>
          <g-button icon="up">向上</g-button>
        </div>
        <div class="code-content" v-highlight style="height: 0;">
          <div class="code-content-height">
            <!-- <div class="code-user-desc">
            组件描述说明
            </div>-->
            <pre><code class="vue">{{codeStr}}</code></pre>
          </div>
        </div>
        <div class="lock-code" @click="showCode(0)" ref="xxx">
          <g-icon class="icon-down" :icon="isShow[0] === false ? 'down' : 'up'"></g-icon>
          <span class="lock-code-word">{{isShow[0] === false ? '显示代码' : '隐藏代码'}}</span>
        </div>
      </div>
      <h3>加载中</h3>
      <p>点击按钮后进行数据加载操作，在按钮上显示加载状态。</p>
      <div class="component-wrapper">
        <div class="component-wrapper-demo">
          <g-button icon="loading" loading>加载中</g-button>
          <g-button icon="download" :loading='loading1' @click="loading1=!loading1">上传</g-button>
        </div>
        <div class="code-content" v-highlight style="height: 0;">
          <div class="code-content-height">
            <!-- <div class="code-user-desc">
            组件描述说明
            </div>-->
            <pre><code class="vue">{{codeStr1}}</code></pre>
          </div>
        </div>
        <div class="lock-code" @click="showCode(1)" ref="xxx">
          <g-icon class="icon-down" :icon="isShow[1] === false ? 'down' : 'up'"></g-icon>
          <span class="lock-code-word">{{isShow[1] === false ? '显示代码' : '隐藏代码'}}</span>
        </div>
      </div>
      <h3>按钮组</h3>
      <p>将多个按钮合成一组作为一个组件</p>
      <div class="component-wrapper">
        <div class="component-wrapper-demo">
         <g-button-group>
                  <g-button icon="left">上一页</g-button>
                  <g-button>更多</g-button>
                  <g-button icon="right" icon-position="right">下一页</g-button>
          </g-button-group>
        </div>
        <div class="code-content" v-highlight style="height: 0;">
          <div class="code-content-height">
            <!-- <div class="code-user-desc">
            组件描述说明
            </div>-->
            <pre><code class="vue">{{codeStr2}}</code></pre>
          </div>
        </div>
        <div class="lock-code" @click="showCode(2)" ref="xxx">
          <g-icon class="icon-down" :icon="isShow[2] === false ? 'down' : 'up'"></g-icon>
          <span class="lock-code-word">{{isShow[2] === false ? '显示代码' : '隐藏代码'}}</span>
        </div>
      </div>

      <h3>attributes</h3>
      <p>组件参数说明</p>
    </div>
  </div>
</template>
 
<script lang="ts">
import Vue from "vue";
import gButton from "../../../src/Button.vue";
import gButtonGroup from "../../../src/ButtonGroup.vue";
import mixin from "../mixin";
import Icon from '../../../src/Icon.vue'

export default {
  name: "gButton",
  mixins: [mixin],
  data() {
    return {
      loading1: true,
      codeStr: `<g-button icon="settings">设置</g-button>
          <g-button icon="thumbsup">点赞</g-button>
          <g-button icon="download">下载</g-button>
          <g-button icon="down">向下</g-button>
          <g-button icon="up">向上</g-button>`.replace(/^\s*/gm, "")
        .trim(),
      codeStr1: `<g-button icon="loading" loading>加载中</g-button>
          <g-button icon="download" :loading='loading1' @click="!loading1">上传</g-button>`.replace(/^\s*/gm, "")
        .trim(),
      codeStr2: `<g-button-group>
                  <g-button icon="left">上一页</g-button>
                  <g-button>更多</g-button>
                  <g-button icon="right" icon-position="right">下一页</g-button>
          </g-button-group>`.replace(/^\s*/gm, "")
        .trim(),
     
        
    };
  },
  components: {
    "g-button": gButton,
    "g-icon":Icon,
    'g-button-group':gButtonGroup
  },
};
</script>

